<template>
	<view-box class="errorUp" bodyPaddingTop="0" bodyPaddingBottom="0" style="background: #FFFFFF;">

		<x-header title="共享交换服务纠错">
			
		</x-header>

		<group label-width="4.5em" label-margin-right="2em" label-align="right">

			<tab>
				<tab-item selected @on-item-click="onItemClick(1)">纠错反馈</tab-item>
				<tab-item @on-item-click="onItemClick(2)">纠错申报</tab-item>
			</tab>

			<div class="chartbox" v-if="show1">

				<x-input v-model="serviceName" required placeholder="共享服务交换名称"></x-input>

				<x-input v-model="unitName" required placeholder="单位名称"></x-input>

				<x-input v-model="itemDetails" placeholder="数据项，请以“、”分割"></x-input>
				<x-input v-model="callName" required placeholder="联系人"></x-input>
				<x-input v-model="callPhone" required placeholder="联系方式"></x-input>
				<div style="padding-top: 10px; padding-right:  15px;margin-left:15px ; border-top: 1px solid #eeeeee;">

					<textarea v-model="showError" required placeholder="请描述您的问题" style="'overflow:auto; background-attachment:   fixed;   background-repeat:   no-repeat;   border-style:   solid;border-color: #FFFFFF;  width:100%; ;height:200px;">  {{showError}}</textarea>
				</div>

				<box gap="10px 10px">
					<x-button plain style="background: #fff;border-color:#ccc" @click.native="register">提交</x-button>
				</box>
			</div>
			<div class="chartbox" v-if="show2">

				<search  v-model="searchValue" ref="search">
					<!--一直报错?页面name不能为search-->
				</search>
				<flexbox orient="vertical" :gutter="0">
					<flexbox-item v-for="i in results " :key="i">
						<div class="box" style="border-top: 1px solid #eeeeee;">
							<div class="titles">
								关于XX共享服务
							</div>
							<div class="jd">XX局</div>
							<div class="sj">反馈时间：2018-6-28</div>
						</div>
					</flexbox-item>

				</flexbox>

			</div>

		</group>

	</view-box>
</template>

<script>
	import {
		ViewBox,
		Tab,
		TabItem,
		XHeader,
		Search,
		Box,
		XInput,
		XButton,
		Group,
		Tabbar,
		TabbarItem,
		Flexbox,
		FlexboxItem,
	} from 'vux';
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from "vuex";
	import * as api from '../store/axios/api';

	export default {
		name: 'errorUp',
		components: {
			ViewBox,
			Tab,
			TabItem,
			XHeader,
			Box,
			XInput,
			XButton,
			Group,
			Tabbar,
			TabbarItem,
			Flexbox,
			FlexboxItem,
			Search,
		},
		data() {
			return {
				searchValue: '',
				serviceName: '',
				unitName: '',
				itemDetails: '',
				callName: '',
				callPhone: '',
				showError: '',
				show1: true,
				show2: false,
				results: [1, 2, 34, 5, 6],
				items: [{
						'value': 0,
						'text': '单位1'
					},
					{
						'value': 1,
						'text': '单位2'
					},
					{
						'value': 2,
						'text': '单位3'
					},
					{
						'value': 3,
						'text': '单位4'
					},
					{
						'value': 4,
						'text': '单位5'
					},
					{
						'value': 5,
						'text': '单位6'
					},
					{
						'value': 6,
						'text': '单位7'
					}
				]
			}
		},
		methods: {
			        filterLsit: function(m_list) {
            let val=this.searchValue;
            return m_list.filter(function(data) {
                return data.name.indexOf(val)>=0;
            });
        },
			register() {
				if(this.serviceName === "") {
					this.$vux.toast.show({
						type: 'cancel',
						text: '共享服务交换名称<br>不能为空！',
						width: '50%'
					});
					return;
				}
				if(this.unitName === "") {
					this.$vux.toast.show({
						type: 'cancel',
						text: '单位名称<br>不能为空！',
						width: '50%'
					});
					return;
				}
				if(this.itemDetails === "") {
					this.$vux.toast.show({
						type: 'cancel',
						text: '数据项<br>不能为空！',
						width: '50%'
					});
					return;
				}
				if(this.callName === "") {
					this.$vux.toast.show({
						type: 'cancel',
						text: '联系人<br>不能为空！',
						width: '50%'
					});
					return;
				}
				if(this.callPhone === "") {
					this.$vux.toast.show({
						type: 'cancel',
						text: '联系方式<br>不能为空！',
						width: '50%'
					});
					return;
				}
				if(this.showError === "") {
					this.$vux.toast.show({
						type: 'cancel',
						text: '问题描述<br>不能为空！',
						width: '50%'
					});
					return;
				}

				this.$vux.toast.show({
					type: 'cancel',
					text: '操作成功',
					width: '50%'
				});

			},
			onItemClick(val) {
				if(val == 1) {
					this.show1 = true;
					this.show2 = false;
				} else if(val == 2) {
					this.show1 = false;
					this.show2 = true;
				}
			}
		}
	}
</script>

<style lang="less">
	.errorUp {
		.weui-input,
		.weui-label {
			font-size: 14px;
		}
		.ui-code {
			line-height: 25px;
			font-size: 12px;
			border: 1px solid #ccc;
			padding: 0 5px;
			border-radius: 4px;
			position: absolute;
			right: 45px;
			bottom: 8px;
			z-index: 10;
		}
	}
	
	.errorUp {
		.box {
			padding: 10px;
			//width: 100%;
			// box-sizing: border-box;
			// -moz-box-sizing: border-box; /* Firefox */
			// -webkit-box-sizing: border-box; /* Safari */
		}
		.title {
			background-color: #45cbad;
			color: white;
			height: 35px;
			line-height: 35px;
			padding-left: 10px;
		}
		.titles {
			background-color: white;
			height: 35px;
			line-height: 35px;
			padding-left: 10px;
		}
		.jd {
			float: left;
			width: 50%;
			background-color: white;
			color: #e09932;
			height: 35px;
			line-height: 35px;
			padding-left: 10px;
			text-align: left;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			/* Firefox */
			-webkit-box-sizing: border-box;
			/* Safari */
			font-size: 14px;
		}
		.sj {
			font-size: 14px;
			float: left;
			width: 50%;
			background-color: white;
			height: 35px;
			line-height: 35px;
			text-align: right;
			padding-right: 10px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			/* Firefox */
			-webkit-box-sizing: border-box;
			/* Safari */
		}
		.righttext {
			color: #fff;
			font-size: 16px;
			font-weight: bold;
		}
		.triangle_border_down {
			width: 0;
			height: 0;
			float: right;
			border-width: 8px 8px 0;
			border-style: solid;
			border-color: #fff transparent transparent;
			/*灰 透明 透明 */
			margin: 8px auto;
			margin-left: 3px;
			position: relative;
		}
	}
</style>